<template>
  <div class="hot-page">
     <van-nav-bar
     left-arrow
      @click-left="$router.back()"
      fixed
      border
      title="热门技术"
    ></van-nav-bar>
    <div ref="box" class="chart-box" style="height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'hot-page',
  mounted () {
    const myChart = echarts.init(this.$refs.box)
    myChart.setOption({
      legend: {
        bottom: '5%',
        left: 'center'
      },
      color: ['#FF6A75', '#DA15FC', '#9765FF', '#00C3FF', '#2CD3D3', '#28D6A6', '#F3D24E', '#FFB484'],
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['35%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 350, name: '面试' },
            { value: 800, name: 'C++' },
            { value: 700, name: '前端' },
            { value: 400, name: '区块链' },
            { value: 700, name: '数据库' },
            { value: 500, name: 'CSS' },
            { value: 250, name: '后端' },
            { value: 330, name: 'Html' }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="less" scoped>
.hot-page{
  background-color: #fff;
}
.chart-box{
  margin-top: 30px;

}
</style>
